<template>
  <el-dialog width="50%"
             :close-on-click-modal="false"
             :model-value="show"
             @close="show = false"
             :destroy-on-close="true"
             title="编辑"
             class="ba-operate-dialog">
    <el-scrollbar class="ba-table-form-scrollbar"
                  v-loading="loading">
      <div class="ba-operate-form"
           :style="config.layout.shrink ? '' : 'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'">
        <el-form :model="rowData"
                 ref="formRef"
                 @keyup.enter="onSubmit"
                 label-width="130">
          <FormItem :label="t('order.orderShip.order_id')"
                    v-model="rowData.order_id"
                    :input-attr="{
                        disabled: true,
                    }"
                    type="string"
                    prop="order_id"
                    :placeholder="t('Please input field', { field: t('order.orderShip.order_id') })" />
          <FormItem :label="t('order.orderShip.tracking_number')"
                    v-model="rowData.tracking_number"
                    :input-attr="{
                        disabled: true,
                    }"
                    type="string"
                    prop="tracking_number"
                    :placeholder="t('Please input field', { field: t('order.orderShip.tracking_number') })" />

          <FormItem :label="t('order.orderShip.buyer_email')"
                    v-model="rowData.buyer_email"
                    type="string"
                    prop="append_buyer_email"
                    :placeholder="t('Please input field', { field: t('order.orderShip.buyer_email') })" />
          <FormItem :label="t('order.orderShip.postal_code')"
                    v-model="rowData.postal_code"
                    type="string"
                    prop="append_postal_code"
                    :placeholder="t('Please input field', { field: t('order.orderShip.postal_code') })" />
          <FormItem :label="t('order.orderShip.buyer_name')"
                    v-model="rowData.name"
                    type="string"
                    prop="append_name"
                    :placeholder="t('Please input field', { field: t('order.orderShip.buyer_name') })" />
          <FormItem :label="t('order.orderShip.phone_number')"
                    v-model="rowData.phone_number"
                    type="string"
                    prop="append_phone_number"
                    :placeholder="t('Please input field', { field: t('order.orderShip.phone_number') })" />
          <FormItem :label="t('order.orderShip.region_code')"
                    v-model="rowData.region_code"
                    type="string"
                    prop="append_region_code"
                    :placeholder="t('Please input field', { field: t('order.orderShip.region_code') })" />
          <FormItem :label="t('order.orderShip.country')"
                    v-model="rowData.country"
                    type="string"
                    prop="append_country"
                    :placeholder="t('Please input field', { field: t('order.orderShip.country') })" />

          <FormItem :label="t('order.orderShip.state')"
                    v-model="rowData.state"
                    type="string"
                    prop="append_state"
                    :placeholder="t('Please input field', { field: t('order.orderShip.state') })" />
          <FormItem :label="t('order.orderShip.city')"
                    v-model="rowData.city"
                    type="string"
                    prop="append_city"
                    :placeholder="t('Please input field', { field: t('order.orderShip.city') })" />
          <FormItem :label="t('order.orderShip.county')"
                    v-model="rowData.county"
                    type="string"
                    prop="append_county"
                    :placeholder="t('Please input field', { field: t('order.orderShip.county') })" />
          <FormItem :label="t('order.orderShip.address_detail')"
                    v-model="rowData.address_detail"
                    type="string"
                    prop="append_address_detail"
                    :placeholder="t('Please input field', { field: t('order.orderShip.address_detail') })" />
          <FormItem :label="t('order.orderShip.shipping_documents')"
                    v-model="rowData.shipping_documents"
                    type="string"
                    prop="shipping_documents"
                    :placeholder="t('Please input field', { field: t('order.orderShip.shipping_documents') })" />
          <FormItem label="SKU(多个sku用英文逗号分隔)"
                    v-model="rowData.skus_info"
                    type="textarea"
                    :input-attr="{
                        rows: 3,
                    }"
                    prop="skus_info"
                    :placeholder="t('Please input field', { field: 'sku' })" />
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <el-button @click="show = false">取消</el-button>
      <el-button type="primary"
                 :loading="loading"
                 @click="onSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang='ts' setup>
import { ref, inject, watch } from 'vue'
import type baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import { getSplitOrderInfo, editSplitOrder } from '/@/api/backend/order/orderShip'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { useConfig } from '/@/stores/config'
const { t } = useI18n()
const config = useConfig()
const baTable = inject('baTable') as baTableClass
const formRef = ref<FormInstance>()
const loading = ref(false)
const show = ref(false)
const rowData = ref({} as anyObj)

const props = defineProps({
    curRow:{
        required: true,
        type: Object,
        default: () => {return {}}
    }
})

defineExpose({
    show
})

const getInfo = () => {
    loading.value = true
    getSplitOrderInfo({id: props.curRow.id, status: props.curRow.status}).then(res => {
        rowData.value = {...res.data, status: props.curRow.status}
        loading.value = false
    })
}

const onSubmit = () => {
    loading.value = true
    editSplitOrder({...rowData.value}).then(res => {
        if(res.code == 200){
            show.value = false
            baTable.getIndex()
            ElMessage ({
                type: 'success',
                message: res.msg,
            })
        } else {
            ElMessage ({
                type: 'error',
                message: res.msg,
            })
        }
        loading.value = false
    }).catch(() => {
        loading.value = false
    })
}

watch(
    () => show.value,
    (v) => {
        if(v) getInfo()
    }
)
</script>

<style scoped lang='scss'>
:deep(.el-form-item){
    justify-content: center;
}
:deep(.el-form-item__content){
    width: 60%;
    flex: initial;
}
</style>